import { CommonForm } from "@/pages/OrderModule/common/components/CommonForm";
import { CommonModal } from "@/views/components/CommonModal";
import CommonInputNumber from "@/pages/OrderModule/common/components/CommonInputNumber";
import { Form, message, Select } from "antd";
import CommonSelect from "@/pages/OrderModule/common/components/CommonSelect";
import { queryLabelTemplate, setTemplate } from "@/pages/GoodsModule/systemGoods/service";
import { useEffect, useState } from "react";


// 商品备注仅对自发订单生效

function SkuRemarkModal(props) {
	const { fetchList, selectedKeys, onCancel, selectedRows } = props;
	const [form] = Form.useForm();
	const [options, setOptions] = useState([]);
	function handleOk() {
		form.validateFields().then(values => {
			setTemplate({
				ids: selectedKeys,
				...values
			}).then(res => {
				const { success, msg } = res;
				if (success) {
					message.success(msg);
					onCancel();
					fetchList();
				}
			});
		});
	}

	async function getTemplateOptions() {
		const { success, data } = await queryLabelTemplate({
			labelType: 7
		})
		if(success) {
			const arr = data.map(v => {
				return {
					label: `${v.templateName}【${v.sizeWidth}×${v.sizeHeight}】`,
					value: v.id
				}
			})
			setOptions(arr);
		}
	}

	useEffect(() => {
		getTemplateOptions();
	}, []);

	return (
		<CommonModal title={{ title: "设置合格证" }} open={true} width="449px" minHeight={"auto"} onOk={handleOk} onCancel={onCancel}>
			<CommonForm
				formProps={{
					form,
					initialValues: {
						templateId: selectedRows.length > 1 ? '' : selectedRows[0].templateIds ? Number(selectedRows[0].templateIds[0]) : '',
					}
				}}
				columns={[
					{
						name: "templateId",
						Component: CommonSelect,
						rules: [{ required: true, message: "请选择合格证模板" }],
						props: {
							options: options,
							placeholder: "必填，选择合格证"
						}
					}
				]}
			></CommonForm>
		</CommonModal>
	);
}

export default SkuRemarkModal;
